<!--  -->
<template>
  <div class="userDetail">
      <div>
        <div class="user_img">
            <img :src="Userinfo.user_img" alt="" v-if="Userinfo.user_img"/>
            <img src="@/assets/default_img.jpg" alt="" v-else/>
        </div>
        <div class="user_edit">
            <div>
                <p>
                    <span>0</span>
                    <span class="user_text">粉丝</span>
                </p>
                <p>
                    <span>65</span>
                    <span class="user_text">关注</span>
                </p>
                <p>
                    <span>10</span>
                    <span class="user_text">获赞</span>
                </p>
            </div>
            <div  @click="$router.push('/edit')">
                <div class="user_editBtn">编辑资料</div>
            </div>
        </div>
      </div>
      <div>
          <h2>{{Userinfo.name}}</h2>
          <p v-if="Userinfo.user_desc">{{Userinfo.user_desc}}</p>
          <p v-else>这个人很神秘，什么都没有写</p>
      </div>
  </div>
</template>

<script>
export default {
    props:['Userinfo'],
  data () {
    return {
    };
  },

  components: {},


}

</script>
<style  scoped>
.userDetail{
    background-color: white;
    padding: 2vw 3.333vw;
}
.user_img{
    margin-right: 20px; 
}
.user_img img{
    height: 85px;
    width: 85px;
    border-radius: 50%;
}
.userDetail>div:nth-child(1){
    display: flex;
}
.user_edit div:nth-child(1){
    display: flex;
}
.user_edit{
    flex: 1;
}
.user_edit p{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 13px;
    
}
.user_edit p .user_text{
    color: #aaa;
}
.user_edit div:nth-child(1) p:nth-child(1),
.user_edit div:nth-child(1) p:nth-child(2){
    border-right: 1px solid #ccc;
}
.user_edit div:nth-child(2){
    padding: 2px 10px;
}
.user_edit div:nth-child(2) .user_editBtn{
     border: 1px solid #fb7a9f;
     padding: 3px;
     display: flex;
     align-items: center;
     justify-content: center;
     color:#fb7a9f ;
     border-radius: 3px;
}
.userDetail div:nth-child(2) h2{
   margin: 2.778vw 0 0.833vw 0;
}
.userDetail div:nth-child(2) p{
    padding: 0;
    margin: 2.778vw 0;

}
</style>